import React, { Component } from "react";
import ReactDOM from "react-dom";
import { fetchList } from "../action/counter.js";
import { connect } from "react-redux";
import Button from "./Button";
import FooterAll from "./FooterAll";
import { setcookie, getcookie, delcookie } from "./cookie";
import $ from "jquery";


class Productcart extends Component{
    componentDidMount(){
        $(window).on('scroll',function(){
        if($('html').scrollTop()>90){
            $('.mainHeader').hide();
            $('.cartTop').hide();
        }else{
            $('.mainHeader').show();
            $('.cartTop').show();
            
        }

        })
        var productCart=[];
        if(productCart){
            productCart=getcookie('products').split(',');
        }
        
        var cart='';
        var countprice=0
        for(let i=0;i<productCart.length;i++){
            fetch("http://10.31.160.71:3000/product/data/"+productCart[i], 
             {
                method: "GET",
              }).then(function(res) {
                res.json().then(function(json) {
                  var oldPrice=json.price;
                  if(json.price){
                       json.price=(parseInt(json.configure.split('$')[1])+parseInt( json.price)).toString();
                  }
                 
                    cart+=`
                    <tr>
                        <td class='first-cart-tr'>
                            <img src='${json.url1}' class='cartImg' data-id='${json._id}'/>
                            <div class='cartName'>${json.name}</div>
                            <div class='cartColor'>${json.color}</div>
                            <div class='cartHigh'>${json.configure}</div>
                            <div class='edit'>edit</div>
                        </td>
                        <td>
                            <span class='cartPrice'>${oldPrice}</span>
                        </td>
                        <td>1</td>
                        <td class='caozuo'>
                            <span class='cartCountPrice'>${json.price}</span>
                            <span class='cartRemove'>Remove</span>
                        </td>
                    </tr>
                    `
                    $('tbody').html(cart)
                    $('.edit').click(function(){
                        setcookie("pId", $(this).siblings('.cartImg').attr('data-id'));
                        $(location).prop("href", "http://localhost:8080/#/productd");
                    })
                    countprice+=parseInt(json.price);
                    $('.cartRemove').on('click',function(){
                        $(this).parent('td').parent('tr').remove();
                        var curId= $(this).parent('td').parent('tr').find('.cartImg').attr('data-id');
                        var arr=getcookie('products').split(',');
                        var sid=arr.indexOf(curId);
                        arr.splice(sid,1);
                        setcookie('products',arr,7)

                    })
                  
            })
            $('.savechanges').click(function(){
               
                $(this).html(countprice)
            })
        })  
    }
    /* ---------------------------------------------------show-------------------------------------- */
    var cateList=''
    var page=1;
            fetch("http://10.31.160.71:3000/product/list", {
              method: "POST",
              mode: "cors",
              headers: {
                Accept: "application/json",
                "Content-Type":
                  "application/x-www-form-urlencoded; charset=UTF-8"
              },
              /* body: `rows=4` */
              body: `page=1`
            }).then(function(res) {
              res.json().then(function(json) {
                console.log(json);
                for (let i = 0; i < json.rows.length; i++) {
                  cateList += `
                                    <div class="outer-box clear">
                                        <img src="${json.rows[i].url1}" />
                                        <div class="inner-box">
                                            <span> ${json.rows[i].name}</span>
                                            <span>$${json.rows[i].price}</span>
                                         
                                        </div>
                                        <div class="addToCart">
                                             <a href="javascript:;" class='add-btn'>Details</a>  
                                        </div>
                                    </div>
                                    `;
                }
                $(".showproduct").html(cateList);
                
                $(".outer-box").hover(
                  function() {
                    $(this)
                      .find(".addToCart")
                      .show();
                  },
                  function() {
                    $(this)
                      .find(".addToCart")
                      .hide();
                  }
                );
                $(".addToCart").click(function() {
                var cookieId = $(this)
                    .siblings(".outer-box img")
                    .attr("data-id");

                    setcookie("pId", cookieId);
                    $(location).prop("href", "http://localhost:8080/#/productd");
                    });
              });
            });
   
}
    render(){
        return (
            <div className="back">
               <section className='cartTop'></section>
               <section className='cartContent'>
                   <h2>shopping bag</h2>
                    <table className='cartTable'>
                        <thead>
                            <tr>
                                <td>PRODUCT NAME</td>
                                <td>PRICE</td>
                                <td>QUY</td>
                                <td>COUNT</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                
                            </tr>
                        </tbody>
                    </table>
                    
                    <p className='savechanges'>Save changes<span></span></p>
                    <h3>you may interested in these product</h3>
                    <section className='showproduct'>
                    </section>

               </section>
               <FooterAll />
            </div>  
        )
        
    }
}
export default Productcart
